<script lang="ts" setup>
import {reactive, watch} from "vue";
import genTemplateService from "@/service/GenTemplateService";
import {ElMessage} from "element-plus";
import GlobalConstant from "@/domain/constants/GlobalConstant";
import StringUtils from "@/utils/StringUtils";
import GenTemplateGroupVO from "@/domain/vo/GenTemplateGroupVO";
import GenTemplateGroupFormBO from "@/domain/bo/GenTemplateGroupFormBO";

const props = defineProps({
  genTemplateGroupFormBO: {
    type: GenTemplateGroupVO,
    required: true
  },
  dialogVisible: {
    type: Boolean,
    required: true
  }
});

//========================== 按钮事件 ==========================
function closeDialog() {
  props.dialogVisible = false;
}

async function saveGenTemplateGroup() {
  let flag = false;
  if (StringUtils.isBlank(genTemplateGroupFormBO.id)) {
    await genTemplateService.addGroup(genTemplateGroupFormBO)
        .then(
            (res) => {
              props.dialogVisible = false;
              ElMessage.success(GlobalConstant.SAVE_SUCCESS_MSG);
              flag = true;
            }, (error) => {
              ElMessage.error(GlobalConstant.SAVE_ERROR_MSG + error.msg);
            }
        )
  } else {
    await genTemplateService.editGroup(genTemplateGroupFormBO)
        .then(
            (res) => {
              props.dialogVisible = false;
              ElMessage.success(GlobalConstant.EDIT_SUCCESS_MSG);
              flag = true;
            },
            (error) => {
              ElMessage.error(GlobalConstant.SAVE_ERROR_MSG + error.msg);
            }
        )
  }
  return flag;
}

//========================== watch监听 ==========================
const genTemplateGroupFormBO = reactive(new GenTemplateGroupFormBO());
watch(
    () => props.dialogVisible,
    (o, n) => {
      if (!n) { //由false改为true表示显示，需要渲染内容
        Object.assign(genTemplateGroupFormBO, props.genTemplateGroupFormBO)
      }
    }
)

//========================== 回调事件 ==========================
const emits = defineEmits(["closeAfter"], ["saveAfter"])

function closeHandle() {
  closeDialog();
  emits("closeAfter");
}

function saveHandle() {
  saveGenTemplateGroup()
      .then((flag) => {
        if (flag) {
          emits("saveAfter");
        }
      })
}

</script>
<template>
  <div>
    <el-dialog
        v-model="props.dialogVisible"
        title="Tips"
        width="30%"
        :close-on-click-modal="false"
        :before-close="closeHandle"
    >
      <template #title>
        <template v-if="props.genTemplateGroupFormBO?.id === undefined">
          <span>新增</span>
        </template>
        <template v-else>
          <span>编辑</span>
        </template>
      </template>
      <el-form
          ref="ruleFormRef"
          :model="genTemplateGroupFormBO"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="模板组名称" placeholder="groupName">
          <el-input v-model="genTemplateGroupFormBO.groupName"/>
        </el-form-item>
      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeHandle">
          关闭
        </el-button>
        <el-button type="primary" @click="saveHandle">
          保存
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>
<style lang="scss" scoped>

</style>